<!--
 * @Description: 确认弹窗
 * @Author: liyujie
 * @Date: 2021/2/25
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/2/25
-->
<template>
    <div class="wrapper">
        <el-dialog
            :visible.sync="dialogVisible"
            width="396px"
            :close-on-click-modal="false"
            :show-close="false"
            custom-class="confirm-dialog"
        >
            <div class="icon">
                <i :class="`el-icon-${ options.type }`"/>
            </div>
            <div class="title">
                {{ title }}
            </div>
            <div class="message">
                {{ message }}
            </div>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    size="medium"
                    :style="{width: '120px', marginRight: '24px'}"
                    v-if="options.showCancelButton"
                    @click="dialogVisible = false"
                >
                    {{ options.cancelButtonText }}
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    :style="{width: '120px'}"
                    @click="$emit('confirm')"
                >
                    {{ options.confirmButtonText }}
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'ConfirmDialog',
    data() {
        return {
            dialogVisible: false,
            title: '温馨提示',
            message: '',
            options: {
                type: 'warning',
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                showCancelButton: true,
            }

        };
    },
    mounted() {
    },
    methods: {
        /**
         * 显示弹窗
         * @param message
         * @param title
         * @param options
         */
        show(message = '', title = '温馨提示', options) {
            this.title = title;
            this.message = message;
            this.options = { ...this.options, ...options };
            this.dialogVisible = true;
        },

        /**
         * 关闭弹窗
         */
        close() {
            this.dialogVisible = false;
        }

    }
};
</script>

<style scoped lang="less">
/deep/ .confirm-dialog {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    padding: 32px 44px;
    border-radius: 4px;
    .el-dialog__header {
        display: none!important;
    }
    .el-dialog__body {
        padding: 0 24px;
        overflow: hidden!important;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        .icon {
            i {
                font-size: 48px;
            }
            .el-icon-warning {
                color: #FFBB01;
            }
            .el-icon-success {
                color: #2FBDB3;
            }
            .el-icon-error {
                color: #F56C6C;
            }
        }
        .title {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 16px;
            margin-top: 16px;
        }
        .message {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 20px;
            margin: 16px 0;
            text-align: center;
        }
    }
    .el-dialog__footer {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        margin-top: 12px;
    }
}
</style>
